<template>
	<view class="my-page">
		<!-- 顶部用户信息区域 -->
		<view class="header-section">
			<view class="user-info-card" @click="goToLogin">
				<view class="avatar-wrapper">
					<u-avatar :src="userInfo.avatarUrl || '/static/images/default-avatar.png'" size="60"></u-avatar>
					<view class="vip-badge" v-if="userInfo.role === '老板'">VIP</view>
				</view>
				<view class="user-details">
					<text class="shop-name">{{ userInfo.nickName || '点击登录' }}</text>
					<view class="phone-role">
						<text class="phone">{{ userInfo.phone ? userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '未绑定手机号' }}</text>
						<text class="role">{{ userInfo.role }}</text>
					</view>
				</view>
			</view>
			<view class="settings-icon" @click="goToSettings">
				<u-icon name="setting-fill" color="#FFFFFF" size="24"></u-icon>
			</view>
		</view>

		<!-- 中部卡片区域 -->
		<view class="middle-section">
			<!-- <view class="card-item vip-card" @click="goToVip">
				<u-icon name="level" color="#F5A623" size="24"></u-icon>
				<view class="card-text">
					<text class="title">VIP会员</text>
					<text class="subtitle">尊享更多特权</text>
				</view>
			</view> -->
			<view class="divider"></view>
			<view class="card-item order-card" @click="goToOrderList">
				<u-icon name="file-text" color="#4A90E2" size="24"></u-icon>
				<view class="card-text">
					<text class="title">我的订单</text>
				</view>
			</view>
		</view>

		<!-- 列表菜单区域 -->
		<view class="menu-section">
			<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="navigateTo(item.url)">
				<view class="menu-content">
					<u-icon :name="item.icon" :color="item.iconColor" size="20"></u-icon>
					<text class="menu-label">{{ item.name }}</text>
				</view>
				<u-icon name="arrow-right" color="#D8D8D8" size="16"></u-icon>
			</view>
		</view>

		<!-- 在线咨询按钮 -->
		<!-- <view class="fab" @click="openConsultation">
			<u-icon name="kefu-ermai" color="#FFFFFF" size="28"></u-icon>
			<text>在线咨询</text>
		</view> -->
		
		<!-- 底部安全区域（如果需要） -->
		<view class="safe-area-bottom"></view>
	</view>
</template>

<script>
	import userManager from '@/utils/user.js';

	export default {
		data() {
			return {
				userInfo: {
					avatarUrl: '/static/images/default-avatar.png',
					nickName: '未登录',
					phone: '',
					role: '游客'
				},
				menuList: [ // 菜单列表数据
					{
						name: '供应商管理',
						icon: 'coupon-fill',
						iconColor: '#FA6C50',
						url: '/pages/supplier/index'
					},
					{
						name: '客户管理',
						icon: 'account-fill',
						iconColor: '#3ACBC1',
						url: '/subPack/client/index'
					},
					{
						name: '意见反馈',
						icon: 'question-circle',
						iconColor: '#4A90E2',
						url: '/subPack/question/question'
					}
				]
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				const userInfo = userManager.getUserInfo();
				console.log('获取到的用户信息:', userInfo);
				
				if (userInfo) {
					this.userInfo = {
						avatarUrl: userInfo.avatarUrl || '/static/images/default-avatar.png',
						nickName: userInfo.nickName || '未登录',
						phone: userInfo.phone || '',
						role: '老板' // 或者从userInfo中获取实际角色
					};
					console.log('更新后的用户信息:', this.userInfo);
				} else {
					console.log('未获取到用户信息');
					// 重置为默认值
					this.userInfo = {
						avatarUrl: '/static/images/default-avatar.png',
						nickName: '未登录',
						phone: '',
						role: '游客'
					};
				}
			},
			goToSettings() {
				if (!userManager.isLoggedIn()) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/subPack/login/login'
						});
					}, 1500);
					return;
				}
				uni.navigateTo({ url: '/subPack/setting/index' });
			},
			goToVip() {
				// 跳转到VIP会员页面
				console.log('跳转到VIP会员页面');
			},
			goToOrderList() {
				uni.navigateTo({ url: '/pages/order/list' });
			},
			navigateTo(url) {
				if (!url) {
					uni.showToast({ title: '功能暂未开放', icon: 'none' });
					return;
				}
				if (!userManager.isLoggedIn()) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/subPack/login/login'
						});
					}, 1500);
					return;
				}
				uni.navigateTo({ url });
			},
			openConsultation() {
				// 打开在线咨询
				console.log('打开在线咨询');
				// 例如：uni.makePhoneCall({ phoneNumber: '客服电话' });
				// 或跳转到客服页面
			},
			
			// 添加点击头像区域跳转到登录页面的方法
			goToLogin() {
				if (!userManager.isLoggedIn()) {
					uni.navigateTo({
						url: '/subPack/login/login'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	background-color: #F6F6F6;
	min-height: 100%;
}

.my-page {
	position: relative;
	min-height: 100vh;
	padding-bottom: 160rpx; /* 为悬浮按钮和底部安全区域留出空间 */
}

/* 顶部区域 */
.header-section {
	position: relative;
	height: 300rpx; 
	background-image: linear-gradient(to right, #3ACBC1, #60D5D0);
	display: flex;
	align-items: center;
	padding: 0 40rpx;
	padding-top: var(--status-bar-height); /* 适配状态栏 */
}

.user-info-card {
	display: flex;
	align-items: center;
	flex: 1;
	cursor: pointer; // 添加手型光标
}

.avatar-wrapper {
	position: relative;
	margin-right: 24rpx;
	
	.vip-badge {
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #F5A623;
		color: #FFFFFF;
		font-size: 18rpx;
		padding: 2rpx 8rpx;
		border-radius: 10rpx 10rpx 10rpx 0;
		transform: translate(10%, 10%);
	}
}

.user-details {
	display: flex;
	flex-direction: column;
	color: #FFFFFF;
	
	.shop-name {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
	}
	
	.phone-role {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		opacity: 0.9;
		
		.phone {
			margin-right: 16rpx;
		}
	}
}

.settings-icon {
	position: absolute;
	top: calc(var(--status-bar-height) + 20rpx);
	right: 40rpx;
}

/* 中部卡片 */
.middle-section {
	display: flex;
	background-color: #FFFFFF;
	margin: -60rpx 30rpx 20rpx; /* 向上偏移 */
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	padding: 30rpx 0;
	position: relative;
	z-index: 10;
	
	.card-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 20rpx;
		
		.card-text {
			display: flex;
			flex-direction: column;
			margin-left: 16rpx;
			
			.title {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 4rpx;
			}
			
			.subtitle {
				font-size: 22rpx;
				color: #999999;
			}
		}
		
		// 单独调整订单卡片的文本居中
		&.order-card .card-text {
			align-items: flex-start; // 确保标题靠左
			.title {
				margin-bottom: 0; // 移除间距
			}
		}
	}
	
	.divider {
		width: 1rpx;
		height: 60rpx; /* 调整高度 */
		background-color: #EAEAEA;
		align-self: center; /* 垂直居中 */
	}
}

/* 菜单列表 */
.menu-section {
	background-color: #FFFFFF;
	margin: 0 30rpx;
	border-radius: 16rpx;
	padding: 10rpx 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
	
	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #F0F0F0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.menu-content {
			display: flex;
			align-items: center;
			
			.menu-label {
				margin-left: 24rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
}

/* 悬浮按钮 */
.fab {
	position: fixed;
	right: 40rpx;
	bottom: calc(120rpx + constant(safe-area-inset-bottom)); /* 适配底部安全区 */
	bottom: calc(120rpx + env(safe-area-inset-bottom));
	width: 120rpx;
	height: 120rpx;
	background-color: #3ACBC1;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: 0 8rpx 16rpx rgba(58, 203, 193, 0.4);
	z-index: 99;
	
	text {
		font-size: 20rpx;
		color: #FFFFFF;
		margin-top: 4rpx;
	}
}

/* 底部安全区域占位 */
.safe-area-bottom {
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
	//background-color: #F6F6F6; /* 和页面背景色一致 */
}

</style>